<template>
  <div id="box">
    <el-button style="margin-bottom: 20px;" type="primary" @click="back">返回</el-button>
    <el-descriptions class="margin-top" title="" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          用户名
        </template>
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          居住地
        </template>
        苏州市
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets" />
          描述
        </template>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building" />
          联系地址
        </template>
        江苏省苏州市吴中区吴中大道 1188 号
      </el-descriptions-item>
    </el-descriptions>
    <div class="d_box">
      <div class="d_item">
        <img src="../../assets/images/charging1.png" alt="">
        <div>规格:60v</div>
        <div>状态:<span style="color: #1afa29; font-size: 17px; font-weight: 600;">充电中...</span></div>
        <div>电量 : <span style="color: #d81e06; font-size: 18px; font-weight: 600;">5%</span></div>
      </div>
      <div class="d_item">
        <img src="../../assets/images/charging2.png" alt="">
        <div>规格:60v</div>
        <div>状态:<span style="color: #1afa29; font-size: 17px; font-weight: 600;">充电中...</span></div>

        <div>电量 : <span style="color: #ffba20; font-size: 18px; font-weight: 600;">40%</span></div>
      </div>
      <div class="d_item">
        <img src="../../assets/images/charging3.png" alt="">
        <div>规格:60v</div>
        <div>状态:<span style="color: #1afa29; font-size: 17px; font-weight: 600;">充电中...</span></div>
        <div>电量 : <span style="color: #1afa29; font-size: 18px; font-weight: 600;">75%</span></div>
      </div>
      <div class="d_item">
        <img src="../../assets/images/charging4.png" alt="">
        <div>规格:60v</div>
        <div>状态:<span style="color: #d81e06; font-size: 17px; font-weight: 600;">未连接</span></div>
        <div>电量 : <span style="color: #1afa29; font-size: 18px; font-weight: 600;">95%</span></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() { return {} },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>
<style lang='scss' scoped>
    .d_box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        >div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 20px 20px 0 0;
            padding: 10px;
            border-radius: 5px;
        }
        .d_item {
            img {
                width: 50px;
            }
            div {
                line-height: 30px;
            }
        }
    }
</style>
